<template>
    <div>
        <div class="dis-row header-title">
            <div class="header-box" v-for="(item,index) in headerList" :key="index" @click="headerAction(index)" :class="{'header-title-1':headerIndex==index}">{{ item.title }}</div>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref } from "vue";
const headerIndex = ref(0)
const headerList = ref([
    
    {
        title:'小说'
    },
    {
        title:'漫画'
    },
    {
        title:'插画'
    },
])
const headerAction = (index)=>{
    headerIndex.value = index
}

// 当他路由为 home 得时候在现实这个组件

</script>

<style scoped>
.header-title{
    /* background: #F4F5F9; */
    width: 90%;
    display: inline-flex;
    justify-content: space-between;
    margin: 0.5rem 0;
    margin-left: 5%;
    color: gray;
}
.header-title-1{
    color: black;
    border-top: 1px #FE8674 solid;
}
.header-box{
    padding: 5px 20px;
    /* border-right: 1px #e5e5e5 solid;
    border-left: 1px #e5e5e5 solid; */
}
</style>